<template>
	<view class="login">
		<view class="pagenation">
			<view class="pagenation_back" @tap="backref()">
				<uni-icons type="arrow-left" size="20" color="#666"></uni-icons>
			</view>
		</view>
		<view class="login_title">
			<view class="login_title_first">
				嘿!
			</view>
			<view class="login_title_second">
				赶紧登录吧！
			</view>
			<view class="login_title_content">
				欢迎回来～我们等你好久了!
			</view>
		</view>
		<view class="login_form">
			<view class="login_form_phone">
				<view class="login_form_label">
					手机号
				</view>
				<view class="login_form_input">
					<input type="text" placeholder="请输入手机号">
				</view>
			</view>
			<view class="login_form_password">
				<view class="login_form_label">
					密码
				</view>
				<view class="login_form_input">
					<input :type="passwordType" placeholder="请输入密码">
				</view>
				<image src="../../static/image/memberCenter/close.svg" mode="" v-show="passwordType == 'password'" @tap="passwordType = 'text'"></image>
				<image src="../../static/image/memberCenter/open.svg" mode="" v-show="passwordType == 'text'" @tap="passwordType = 'password'"></image>
			</view>
		</view>
		<view class="login_other">
			<view class="login_forget" @tap="toForget()">
				忘记密码?
			</view>
			<view class="login_register" @tap="toRegister()">
				去注册
			</view>
		</view>
		<view class="login_btn">
			登录
		</view>
		<view class="login_tips">
			登录即代表您已阅读并同意<text>《注册协议》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				passwordType:'password'
			}
		},
		methods: {
			// 返回用户中心
			backref(){
				uni.navigateTo({
					url:'/pages/memberCenter/memberCenter'
				})
			},
			// 前往忘记密码
			toForget(){
				uni.navigateTo({
					url:'/pages/forget/forget'
				})
			},
			// 前往注册
			toRegister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #FAFBFF;
}
.login{
	padding: 100rpx 50rpx 80rpx;
	.pagenation{
		.pagenation_back{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 76rpx;
			height: 76rpx;
			border-radius: 12rpx;
			border: 1rpx solid #ccc;
		}
	}
	.login_title{
		margin-top: 70rpx;;
		.login_title_first{
			font-size: 60rpx;
			color: #343965;
			font-weight: 700;
		}
		.login_title_second{
			font-size: 60rpx;
			color: #343965;
			font-weight: 700;
			padding-left: 40rpx;
		}
		.login_title_content{
			margin-top: 24rpx;
			font-size: 24rpx;
			color: #343965;
		}
	}
	.login_form{
		margin-top: 98rpx;
		.login_form_phone{
			display: flex;
			align-items: center;
			background-color: #ECF2FF;
			height: 100rpx;
			border-radius: 100rpx;
			padding: 0 40rpx;
			margin-bottom: 30rpx;
		}
		.login_form_password{
			position: relative;
			display: flex;
			align-items: center;
			background-color: #ECF2FF;
			height: 100rpx;
			border-radius: 100rpx;
			padding: 0 40rpx;
			image{
				position: absolute;
				right: 40rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}
		.login_form_label{
			font-size: 28rpx;
			color: #343965;
			width: 120rpx;
		}
		.login_form_input{
			input{
				color: #333;
				font-size: 24rpx;
				width: 400rpx;
				&.placeholder{
					color: #343965;
				}
			}
		}
	}
	.login_other{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		.login_forget{
			color: #343965;
			font-size: 24rpx;
		}
		.login_register{
			color: #343965;
			font-size: 24rpx;
		}
	}
	.login_btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		border-radius: 100rpx;
		background-color: #2588FF;
		color: #fff;
		font-size: 32rpx;
		font-weight: 700;
		margin-top: 120rpx;
	}
	.login_tips{
		position: fixed;
		bottom: 40rpx;
		left: 0;
		width: 100%;
		color: #343965;
		font-size: 24rpx;
		text-align: center;
		text{
			color: #2588FF;
		}
	}
}
</style>
